<template>
  <div class="common-layout">
    <el-container>
      <el-header class="head_nav">
          <!-- <img src="../assets/logo-system.jpg" alt="图书管理系统" class="logo"/> -->
          <span style="padding-top: 15px;width: 200px;font-size: 30px; font-weight: bold;">图书管理系统</span>
          <span style="padding-top: 25px;font-size: 18px; margin-right: 20px;">当前时间：{{currentTime}}</span>
          <!-- <el-button type="text" @click="logout" class="exit_btn"><el-icon><SwitchButton /></el-icon>退出</el-button> -->
            <el-button 
          type="text" 
          @click="logout" 
          style="padding-top: 15px;font-size: 18px; margin-left: auto;padding-top: 40px;" 
          class="exit_btn"
        >
          <el-icon><SwitchButton /></el-icon>
          退出
        </el-button>
    </el-header>
      <el-container>
        <el-aside width="200px" height="100%">
           
        <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleMenuSelect" router>
          <el-sub-menu index="1">
            <template #title><span style="font-size: 17px;font-weight:bold" >用户管理</span>&nbsp;&nbsp;<el-icon><UserFilled style="color: rgb(17, 152, 182);"/></el-icon></template>
            <el-menu-item index="home/infocontrol/userinfo">个人信息</el-menu-item>
            <el-menu-item index="home/infocontrol/changepwd">修改密码</el-menu-item>
            <!-- 10.讲解 -->
            <el-menu-item index="home/infocontrol/usermanagement" v-if="type==0">管理用户</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="home/books/control"><span style="font-size: 17px;font-weight:bold">图书管理</span><el-icon style="padding-left:10px;"><Notebook style="color: rgb(17, 152, 182);"/></el-icon></el-menu-item>
          <el-menu-item index="gradesearch" v-if="type==1"><span style="font-size: 17px;font-weight:bold" >阅读分析</span></el-menu-item>
          <el-menu-item index="home/user/forum"><span style="font-size: 17px;font-weight:bold" >论坛</span></el-menu-item>
          <el-menu-item index="home/user/announcement"><span style="font-size: 17px;font-weight:bold" >公告发布</span></el-menu-item>
        </el-menu>

        </el-aside>
        <el-main>
          <el-carousel :interval="5000" height="35rem" v-if="picVisale" @change="changeImg" indicator-position="outside">
            <el-carousel-item v-for="(item,index) in images" :key="index">
            <el-image
                :class="className"
                style="width:100%; height:100%"
                :src="item.idView"
                fit="fit"></el-image>
            </el-carousel-item>
        </el-carousel>
          <div class="tags">
            <el-tag v-for="tag in tags" :key="tag.name" closable @close="handleTagClose(tag)">{{tag.title}}</el-tag>
         </div>
          <router-view router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style src="~/assets/css/index.css" scoped></style>
<script setup>
import { ref,computed,reactive,onMounted } from "vue";
import { useRouter } from "vue-router";
import { removeToken } from '~/composables/auth'
import { toast } from "~/composables/util";
import { useStore } from "vuex";
import image1 from '../assets/imgs/1.jpg';  
import image2 from '../assets/imgs/2.jpg';  
import image3 from '../assets/imgs/3.jpg';  
import image4 from '../assets/imgs/4.jpg';  
import image5 from '../assets/imgs/5.jpg';  
const images = reactive([  
            { id: 0, idView: image1 },  
            { id: 1, idView: image2 },  
            { id: 2, idView: image3 },  
            { id: 3, idView: image4 },  
            { id: 4, idView: image5 },  
        ]);  
        const className = ref('');  
        var picVisale=ref(true);
        // 初始化 className  
        onMounted(() => {  
            className.value = 'lun-img-two';  
            setTimeout(() => {  
                className.value = 'lun-img';  
            }, 300);  
        });  
  
        // 方法  
        const changeImg = () => {  
            className.value = 'lun-img-two';  
            setTimeout(() => {  
                className.value = 'lun-img';  
            }, 300);  
        };  
        // 返回响应式数据和方法
const store=useStore()
const type=ref(store.state.user.type)
const tags = ref([]);
const router = useRouter();
const logout = () => {
  // 处理注销
  //发出请求 消除token并返回登录界面
  removeToken()
  router.push("/");
  toast("成功退出","success")
};


const handleTagClose = async(tag) => {
  const index = tags.value.findIndex((t) => t.name === tag.name);
  tags.value.splice(index, 1);
  const lastTag = tags.value[tags.value.length - 1];
  if (lastTag) {
    router.push({ path: `/${lastTag.name}` });
  } else {
    router.push({ path: '/home' });  // 如果没有标签了，则重定向到默认页面
    picVisale.value=true;
  }
};
const handleMenuSelect = async(index, indexPath) => {
  router.push({ path: `/${index}` });
  picVisale.value=false;
  // 根据路由信息获取页面名称，然后添加到标签中
  const route = router.getRoutes().find(route => route.path === `/${index}`);
  if (route) {
    const pageName = route.meta && route.meta.title ? route.meta.title : index;
    const tag = tags.value.find(tag => tag.name === index);
    if (!tag) {
      tags.value.push({ name: index, title: pageName });
    }
  }

  // 如果是点击的子菜单，也需要将父菜单的标签添加进去
  if (indexPath && indexPath.length > 1) {
    const parentIndex = indexPath[0];
    const parentRoute = router.getRoutes().find(route => route.path === `/${parentIndex}`);
    if (parentRoute) {
      const parentPageName = parentRoute.meta && parentRoute.meta.title ? parentRoute.meta.title : parentIndex;
      const parentTag = tags.value.find(tag => tag.name === parentIndex);
      if (!parentTag) {
        tags.value.push({ name: parentIndex, title: parentPageName });
      }
    }
  }
}

// 4.讲解
const currentTimestamp = ref(Date.now());

const currentTime = computed(() => {
  const date = new Date(currentTimestamp.value);
  return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
});

// 每秒更新一次时间
setInterval(() => {
  currentTimestamp.value = Date.now();
}, 1000);
</script>
